import React from 'react';
import style from './style.css'
import {getHistory, uuid} from "../../util/uitls";
import MyIconImage from '../MyIconImage';
import If from "../If";
import {getStoreUtil, setStoreUtil} from "../../util/store";
import {connect} from 'react-redux'

export class Bottom extends React.Component {
    constructor(props) {
        super()
        this.getStore = getStoreUtil.bind(props)
        this.setStore = setStoreUtil.bind(props)

        this.state = {
            hidden: false,
            activeItem: props.defaultTab
        }

    }

    componentWillReceiveProps(nextProps) {
        this.getStore = getStoreUtil.bind(nextProps)
        this.setStore = setStoreUtil.bind(nextProps)
    }

    onClick(item) {

    }

    componentDidMount() {
        var app_bottom = this.getStore("app.bottom")
        if (app_bottom == "广场" && this.props.store.routing.location.pathname != "/home") {
            getHistory().push("/home")
        }
        if (app_bottom == "通讯录" && this.props.store.routing.location.pathname != "/talk-list") {
            getHistory().push("/talk-list")
        }
        if (app_bottom == "朋友圈" && this.props.store.routing.location.pathname != "/friend-quan") {
            getHistory().push("/friend-quan")
        }
        if (app_bottom == "聊天" && this.props.store.routing.location.pathname != "/talk-list") {
            getHistory().push("/talk-list")
        }
        if (app_bottom == "个人信息" && this.props.store.routing.location.pathname != "/my-self") {
            getHistory().push("/my-self")
        }

    }

    selectBottom(item, e) {
        e.preventDefault();
        this.setStore("app.bottom", item)
        switch (item) {
            case "广场":
                getHistory().push("/home")
                break;
            case "通讯录":
                getHistory().push("/talk-list")
                break;
            case "朋友圈":
                getHistory().push("/friend-quan")
                break;
            case "聊天":
                getHistory().push("/talk-list")
                break;
            case "个人信息":
                getHistory().push("/my-self")
                break;


        }
    }

    render() {
        var self = this
        var activeTab = this.getStore("app.bottom")
        return (
            <div className={style.bottom}>
                <div className={style.bottomItem} onClick={this.selectBottom.bind(this, "广场")}>
                    <If isTrue={activeTab != "广场"}>
                        <MyIconImage image="http://pj5qx5lsj.bkt.clouddn.com/%E5%B9%BF%E5%9C%BA.png"/>
                        <div>广场</div>
                    </If>
                    <If isTrue={activeTab == "广场"}>
                        <MyIconImage image="http://pj5qx5lsj.bkt.clouddn.com/%E5%B9%BF%E5%9C%BA.png"/>
                        <div style={{color: "red"}}>广场</div>
                    </If>
                </div>
                <div className={style.bottomItem} onClick={this.selectBottom.bind(this, "通讯录")}>
                    <If isTrue={activeTab != "通讯录"}>
                        <MyIconImage image="http://pj5qx5lsj.bkt.clouddn.com/tongxunlu.png"/>
                        <div>通讯录</div>
                    </If>
                    <If isTrue={activeTab == "通讯录"}>
                        <MyIconImage image="http://pj5qx5lsj.bkt.clouddn.com/tongxunlu.png"/>
                        <div style={{color: "red"}}>通讯录</div>
                    </If>

                </div>
                <div className={style.bottomItem} onClick={this.selectBottom.bind(this, "朋友圈")}>
                    <If isTrue={activeTab != "朋友圈"}>
                        <MyIconImage image="http://pj5qx5lsj.bkt.clouddn.com/pengyouquan.png"/>
                        <div>朋友圈</div>
                    </If>
                    <If isTrue={activeTab == "朋友圈"}>
                        <MyIconImage image="http://pj5qx5lsj.bkt.clouddn.com/pengyouquan.png"/>
                        <div style={{color: "red"}}>朋友圈</div>
                    </If>

                </div>
                <div className={style.bottomItem} onClick={this.selectBottom.bind(this, "聊天")}>
                    <If isTrue={activeTab != "聊天"}>
                        <MyIconImage image="http://pj5qx5lsj.bkt.clouddn.com/liaotian.png"/>
                        <div>聊天</div>
                    </If>
                    <If isTrue={activeTab == "聊天"}>
                        <MyIconImage image="http://pj5qx5lsj.bkt.clouddn.com/liaotian.png"/>
                        <div style={{color: "red"}}>聊天</div>
                    </If>
                </div>
                <div className={style.bottomItem} onClick={this.selectBottom.bind(this, "个人信息")}>
                    <If isTrue={activeTab != "个人信息"}>
                        <MyIconImage image="http://pj5qx5lsj.bkt.clouddn.com/ziliao.png"/>
                        <div>个人信息</div>
                    </If>
                    <If isTrue={activeTab == "个人信息"}>
                        <MyIconImage image="http://pj5qx5lsj.bkt.clouddn.com/ziliao.png"/>
                        <div style={{color: "red"}}>个人信息</div>
                    </If>
                </div>
            </div>
        );
    }
}

Bottom.defaultProps = {
    tabs: [],
    defaultTab: ""
}

export default connect(function (state) {
    return {_store: state, store: state,}
}, function (dispatch, ownProps) {
    return {
        dispatch,
    }
})(Bottom)